<template>
	<div v-show="showpage" class="sort_page zoomIn" :style="{'background':basicData.ranking_bgcolor}">
		<div class="top-image">
			<img :src="basicData.ranking_banner" />
		</div>
		<div class="container">
			<div class="tab">
				<div :class="{'tab-select':tabSelect==2}" @click="changeTab(2)">勤奋榜</div>
				<div :class="{'tab-select':tabSelect==1}" @click="changeTab(1)">大神榜</div>
			</div>
			<div class="card-contain" v-if="topThree.length>0">
				<div class="card"  v-for="(item,index) in topThree">
					<div class="avatar">
						<img :src="item.user.avatar" alt=""/>
					</div>
					<span class="name">{{item.user.username}}</span>
					<span class="nums">{{tabSelect==1?item.score:item.num}}{{comText}}</span>
					<span class="time" v-if="item.hasOwnProperty('time')">用时:{{item.time}}秒</span>
					<div class="logo">
						<img :src="require('@/static/sports/sorts_'+formatImage(index+1)+'.png')" />
					</div>
				</div>
			</div>
			<div class="lists" v-if="listData.length>0">
				<div class="list"  v-for="(item,index) in listData">
					<span class="id">{{item.id}}</span>
					<div class="avatar">
						<img :src="item.user.avatar || ''" alt=""/>
					</div>
					<span class="name" v-if="tabSelect==2">{{item.user.username}}</span>
					<div class="tab2" v-if="tabSelect==1">
						<span class="name">{{item.user.username}}</span>
						<span class="time">用时:{{item.time}}秒</span>
					</div>
					<div class="nums">{{tabSelect==1?item.score:item.num}}{{comText}}</div>
				</div>
			</div>
			<div v-if="topThree.length==0 && listData.length==0" class="end-text" style="font-size: 30rpx; text-align: center;width:100%;height: 100rpx;">
				敬请期待更多玩家冲榜···
			</div>
			<div class="end-text">
				{{tabSelect==1?'以最终分数排序，分数相同按用时排序':'以累计答题次数排序'}}<br/>榜单下次更新时间：{{updateTime}}
			</div>
		</div>
		<div style="height: 210rpx;"></div>
		<div class="list mine-info" v-if="userInfo.hasOwnProperty('id')">
			<span class="id">{{userSort}}</span>
			<div class="avatar">
				<img :src="userInfo.avatar" alt=""/>
			</div>
			<div class="tab1" >
				<span class="name">{{userInfo.username}}</span>
				<span class="user_nums" >{{userNum}}{{comText}}</span>
			</div>
			<!-- 
			<div class="tab2" v-if="tabSelect==1">
				<span class="name">{{userInfo.username}}</span>
				<div>
					<span class='times'>
						{{userNum}}{{comText}}
					</span>
					<span class="time">用时:{{0}}秒</span>
				</div>
			</div> -->
			
			<div class="btn" @click="next">去参与</div>
		</div>
		<div  class="list mine-info" v-if="!userInfo.hasOwnProperty('id')">
			<div class="no-info" @click="next">去参与</div>
		</div>
	</div>
</template>

<script>
	import{  getRank,ActivityInfo } from '@/api/api.js'
	import { isWeiXin , isQianfan,shareFun,countNumAnswer,checkImage,proxyShareFun } from '@/until/QFH5.js'
	import { mapGetters } from 'vuex'
	import {formatTime} from '@/until/tool'
	export default{
		data(){
			return{
				tabSelect:2,
				actid:'',
				topThree:[],
				listData:[],
				userSort:'*',
				userInfo:{},
				userNum:0,
				updateTime:'',
				plugin:'',
				type:'',
				basicData:{},
				
				showpage:false
			}
		},
		computed: {
			comText() {
				if(this.tabSelect==1) return '分'
				return '次'
			},
			...mapGetters(['loginInfo','siteinfo','activityType','activityName'])
		},
		methods: {
			formatTimeStr(val){
				return formatTime(val)
			},
			changeTab(val){
				this.tabSelect = val
				this.initData()
			},
			formatImage(val){
				if(val==2)return 1
				if(val==1)return 2
				return val
			},
			next(data){
				let path = '/?type=answer&plugin=answer&id='+this.actid
				this.$navigateTo({url:path})
			},
			initData(){
				
				let obj = {actid:this.actid,rank_type:this.tabSelect}
				if(this.$route.query.hasOwnProperty('plugin')){
					obj.plugin = this.$route.query.plugin
				}
				getRank(obj,'answer','answer').then(res=>{
					this.showpage = true
					if(res.code==0){
						this.userSort='*'
						let {list,expire,user_num} = res.data
						this.basicData.ranking_banner=checkImage(1,res.data.banner)
						this.basicData.ranking_bgcolor=res.data.bgcolor
						this.updateTime = this.formatTimeStr(expire)
						this.userNum = user_num
						let uid = this.userInfo.id ||  null
						console.log('****',uid)
						list.forEach((item,index)=>{
							let id = index+1>9?index+1:'0'+(index+1)
							item.id = id
							item.score = Number(item.score).toFixed(0)
							if(uid!=null && uid==item.user_id){
								this.userSort = index+1
							}
						})
						if(list.length!=0 && this.userSort=='*'){
							this.userSort='99+'
						}
						
						let length = list.length
						if(length>3){
						  	this.topThree = list.slice(0,3)
						  	this.listData = list.slice(3,list.length)
						}else{
							this.listData = []
							let obj = {
								id:'03',
								num:'*',
								score:'*',
								user:{
									avatar:require('@/static/guess/avatar.png'),
									username:'等待冲榜中'
								}
								
							}
							if(this.tabSelect==1){obj.time=0}
							else if(obj.hasOwnProperty('time')){delete obj.time}
							switch(length){
								case 1:
									this.topThree = list;
									let first = obj
									first.id = '02'
									this.topThree.push(first)
									this.topThree.push(obj)
									break;
								case 2:
									this.topThree = list;
									this.topThree.push(obj)
									break;
								case 3:this.topThree = list;break;
								
								default:this.topThree = []
							}
						
						}
						if(this.topThree.length>0){
							let objData = this.topThree[1]
							this.topThree.splice(1,1)
							this.topThree.unshift(objData)
						}
						
					}else{
						uni.showToast({
							title:res.text,
							icon:'none'
						})
					}					
				})
			},
			async initBasicData(){
				let res = await ActivityInfo({actid:this.actid})
				this.basicData = res.data.settings
			},
		},
		mounted() {
			// this.initBasicData()
			
			this.userInfo =  uni.getStorageSync('wechatInfo'+this.actid)|| this.loginInfo || null
			if(isWeiXin() && this.userInfo.headimgurl!=''){
				let {headimgurl,nickname} = this.userInfo
				this.userInfo.avatar = headimgurl || undefined
				this.userInfo.username = nickname || '*'
			}
			this.initData()
			this.$setTitle('排行榜')
			let data =  {title:'排行榜',image:this.siteinfo.qiniu_url+'/work_file_/sorts_top_image.png',desc:'快来加入我们，大家一起冲冲冲！'}
			proxyShareFun(data.title,data.image,data.desc,window.location.href)
		},
		onLoad(op){
			this.actid = op.id
			countNumAnswer(this.actid)
			this.$store.commit('SETACTIVITYNAME', op.plugin)
			this.$store.commit('SETACTIVITYTYPE', op.type)
		},
		destroyed(){
			let data =  this.basicData
			let url = window.location.origin+'/plugin-view/?type=answer&plugin=answer&id='+this.actid
			proxyShareFun(data.title, data.image, data.desc, url)
		}
	}
</script>

<style scoped lang="scss">
	@import url("../animation.css");
	.sort_page{
		/* background-color: #2471FD; */
		max-width: 750rpx;
		min-height: 100vh;
		margin: 0 auto;
		position: relative;
	}
	.top-image{
		line-height: 0;
	}
	.top-image img{
		width: 750rpx;
		height: 660rpx;
	}
	.container{
		width: 694rpx;
		border-radius: 30rpx;
		margin: -112rpx auto 0;
		background-color: #fff;
		position: relative;
		z-index: 9;
		padding-bottom: 1rpx;
	}
	.container .tab{
		display: flex;
		justify-content: center;
		height: 89rpx;
		padding-top: 23rpx;
	}
	.tab div{
		position: relative;
		margin: 0 20rpx;
		height: 45rpx;
		line-height: 45rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #666;
	}
	.tab-select{
		color: #222 !important;
	}
	.tab-select::after{
		content: "";
		position: absolute;
		left: 50%;
		bottom: -16rpx;
		transform: translateX(-50%);
		width: 30rpx;
		height:6rpx;
		border-radius: 3rpx;
		background-color: #2776F9;
	}
	.card-contain{
		margin-top: 8rpx;
		height: 346rpx;
		align-items: center;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.card{
		width: 198rpx;
		height: 304rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		position: relative;
		margin-bottom: 30rpx;
	}
	.card:nth-child(1){
		background-color: #F6FCFF;
		border-radius: 26rpx 0px 0px 26rpx;
	}
	.card:nth-child(2){
		width: 240rpx;
		height: 346rpx;
		border-radius: 26rpx;
		background-color: #FFF2EE;
	}
	.card:nth-child(3){
		background-color: #FFFBEB;
		border-radius: 0px 26rpx 26rpx 0px;
	}
	.card .avatar{
		margin: 0 auto;
		width: 114rpx;
		height: 114rpx;
		padding: 5rpx;
		border-radius: 50%;
		border: 3rpx solid #FD4F2D;
		margin-top: 73rpx;
	}
	.card .avatar img{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.card:nth-child(2) .avatar{
		width: 144rpx;
		height: 144rpx;
		margin-top: 62rpx;
	}
	.card:nth-child(3) .avatar{
		width: 104rpx;
		height: 104rpx;
		margin-top: 81rpx;
	}
	.card .name{
		margin-top: 10rpx;
		font-size: 30rpx;
		color: #222222;
		display: block;
		height: 30rpx;
		line-height: 30rpx;
		width: calc(100% - 16rpx);
		padding: 0 8rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: center;
	}
	
	.card .nums{
		width: 100%;
		text-align: center;
		display: block;
		height:33rpx;
		line-height: 33rpx;
		font-size: 24rpx;
		color: #FF3D51;
	}
	.time{
		text-align: center;
		display: block;
		font-size: 20rpx;
		line-height: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	
	.card:nth-child(2) .nums{
		margin-top: 4rpx;
	}
	.card:nth-child(3) .nums{
		margin-top: 2rpx;
	}
	.card:nth-child(2) .time{
		margin-top: 4rpx;
	}
	.card:nth-child(3) .time{
		margin-top: 2rpx;
	}
	.card .logo{
		position: absolute;
		top: 16rpx;
		right: 18rpx;
		width:52rpx;
		height: 56rpx;
		line-height: 0;
	}
	.card .logo img{
		width: 100%;
		height: 100%;
	}
	.card:nth-child(2) .logo{
		right: 14rpx;
	}
	.card:nth-child(3) .logo{
		right: 17rpx;
	}
	.lists{
		margin-top: 30rpx;
		padding:  0 0 1rpx 0;
	}
	.list{
		width: 632rpx;
		padding:  0 30rpx;
		margin-bottom: 30rpx;
		height: 100rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 30rpx;
		font-family: SF Pro Display-Bold, SF Pro Display;
		font-weight: bold;
		color: #222222;
	}
	.list .id{
		/* margin-left: .3rpx; */
		width: 30rpx;
	}
	.list .avatar{
		margin-left: 20rpx;
		width: 86rpx;
		height: 86rpx;
		border-radius: 50%;
		border: 2rpx solid #FF3D51;
		padding: 5rpx;
	
	}
	.list .avatar img{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.list .name{
		margin-left: 20rpx;
		width: 332rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.list .nums{
		width: 130rpx;
		text-align: right;
		color: #FF3D51;
	}
	.end-text{
		width: 100%;
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-bottom: 40rpx;
	}
	.mine-info{
		position: fixed;
		left:50%;
		bottom: 0;
		transform: translateX(-50%);
		z-index: 10;
		padding: 0 30rpx;
		width: 690rpx;
		height: 198rpx;
		background: #FFFFFF;
		box-shadow: 0px -12rpx 20rpx 1rpx rgba(204,204,204,0.16);
		margin-bottom: 0;
	}
	.mine-info .id{
		width: 43rpx;
		
	}
	.mine-info .name{
		width: 207rpx;
		
	}
	.mine-info .btn{
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		color: #fff;
		background: #FF3D51;
		border-radius: 35rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
	}
	.mine-info .user_nums{
		display: block;
		width: 107rpx;
		height: 40rpx;
		line-height: 46rpx;
		font-size: 30rpx;
		text-align: right;
		color: #FF3D51;
		text-align: left;
	}
	.mine-info .no-info{
		margin-left: 95rpx;
		width: 500rpx;
		height: 90rpx;
		line-height: 90rpx;
		color: #fff;
		background: #FF3D51;
		border-radius: 45rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
	}
	.tab1{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.tab2{
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
		span{
			margin: 2rpx 0;
		}
		.name{
			margin-left: 25rpx;
			width: 326rpx;
			height: 40rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #222222;
			display: block;
		}
		.time{
			display: block;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			margin-left: 25rpx;
			text-align: left;
		}
	}
</style>